<template>
  <a-drawer
    title="审批流明细"
    placement="right"
    :closable="false"
    :visible="show"
    @close="onClose"
    width="40%"
  >
    <h2>审批层级{{ idx }}</h2>
    <a-form-model
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 14 }"
      :model="detailInfo"
      :rules="rules"
      ref="rulesForm"
    >
      <a-form-model-item label="审批人员" required prop="userID">
        <a-select
          placeholder="请选择人员"
          v-model="detailInfo.userID"
          show-search
          :filter-option="filterOption"
        >
          <a-select-option v-for="item in userList" :key="item.userID">{{
            item.userName
          }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="是否必须">
        <a-checkbox v-model="detailInfo.isMust"></a-checkbox>
      </a-form-model-item>
    </a-form-model>
    <footer>
      <a-button key="back" @click="onClose">取消</a-button>
      <a-button key="submit" type="primary" @click="handleOk">提交</a-button>
    </footer>
  </a-drawer>
</template>
 
<script>
import {
  insApprovalLevel,
  insApprovalProcessRelation,
} from "@/api/JobRecordApproval";
export default {
  props: ["show", "item", "idx", "list"],
  data() {
    return {
      detailInfo: {
        userID: null,
        isMust: false,
      }, //审批流载体
      rules: {
        userID: [
          { required: true, message: "请选择审批人员", trigger: "change" },
        ],
      }, //审批流校验规则
      userList: [], //用户列表
    };
  },

  methods: {
    //关闭方法
    onClose() {
      this.$emit("update:show", false);
    },
    //确认提交
    handleOk() {
      /* 以当前传入idx是否存在列表中最后一位判断是否添加层级 */
      this.$refs.rulesForm.validate(async (valid) => {
        if (valid) {
          if (this.list[this.idx - 1]) {
          } else {
            let data = {
              approvalProcessID: this.item.approvalProcessID,
              isMust: true,
              isTimeLimit: true,
              createUser: JSON.parse(localStorage.getItem("nbcToken")).userId,
              levelType: 11,
            };
            let res = await insApprovalLevel([data]);
            let item = {
              approvalLevelID: res.body,
              userId: this.detailInfo.userID,
              isMust: this.detailInfo.isMust,
              createUser: JSON.parse(localStorage.getItem("nbcToken")).userId,
              relationType: 1,
            };
            let relationRes = await insApprovalProcessRelation([item]);
            this.$message.success("新增成功");
            this.detailInfo = {
              userID: null,
              isMust: false,
            }; //审批流载体
            this.onClose();
            this.$emit("updataList");
          }
        } else {
          this.$message.error("请填写完必填信息");
        }
      });
    },
    //下拉框搜索方法
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
};
</script>
 
<style lang = "less" scoped>
/deep/ .ant-drawer-content {
  .ant-drawer-wrapper-body {
    display: flex;
    flex-direction: column;
    .ant-drawer-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      .ant-form {
        flex: 1;
      }
      footer {
        display: flex;
        justify-content: flex-end;
        .ant-btn:nth-child(2) {
          margin-left: 1.25rem;
        }
      }
    }
  }
}
</style>